var shopcarts = [{
  // 购物车编号
  cartId: 1,
  // 店铺编号 
  shopId: 2001,
  // 店铺名称
  shopName: "荣耀官方旗舰店",
  isChecked: false,
  products: [{
    // 商品编号
    productId: 1001,
    // 商品名称
    productName: "【64GB限时优惠100元】华为旗下荣耀Play4T手机新品大电池AI摄影",
    // 顶层图片
    topImg: "img/4.jpg",
    // 商品图片
    imgs: [
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg",
      "img/4.jpg",
    ],
    // 是否参加电竞节
    isActivity: true,
    // 是否支持信用卡
    isCard: true,
    // 是否支持七天退货
    isSeven: true,
    // 是否如实描述
    isRealDesc: true,
    // 是否选择
    isChecked: false,
    // 规格
    spec: `<p>机身颜色：iPhone8 银色4.7英寸</p>
                <p>版本类型：中国大陆</p>
                <p>套餐类型：官方标配</p>
                <p>存储容量：256GB</p>`,
    marketPrice: 2000,
    // 单价
    price: 1199.00,
    // 购买的数量
    count: 2,
    // 金额
    amount: 2398.00
  },
  {
    // 商品编号
    productId: 1002,
    // 商品名称
    productName: "【6+64GB魅海蓝限时低至1199元】华为旗下荣耀手机荣耀9X麒麟",
    // 顶层图片
    topImg: "img/5.jpg",
    // 商品图片
    imgs: [
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg",
      "img/4.jpg",
    ],
    // 是否参加电竞节
    isActivity: true,
    // 是否支持信用卡
    isCard: true,
    // 是否支持七天退货
    isSeven: true,
    // 是否如实描述
    isRealDesc: true,
    // 是否选择
    isChecked: true,
    // 规格
    spec: `<p>机身颜色：iPhone8 银色4.7英寸</p>
                <p>版本类型：中国大陆</p>
                <p>套餐类型：官方标配</p>
                <p>存储容量：256GB</p>`,
    marketPrice: 2000,
    // 单价
    price: 1199.00,
    // 购买的数量
    count: 3,
    // 金额
    amount: 2398.00
  },
  {
    // 商品编号
    productId: 1003,
    // 商品名称
    productName: "【6+64GB魅海蓝限时低至1199元】华为旗下荣耀手机荣耀9X麒麟",
    // 顶层图片
    topImg: "img/5.jpg",
    // 商品图片
    imgs: [
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg",
      "img/4.jpg",
    ],
    // 是否参加电竞节
    isActivity: true,
    // 是否支持信用卡
    isCard: true,
    // 是否支持七天退货
    isSeven: true,
    // 是否如实描述
    isRealDesc: true,
    // 是否选择
    isChecked: true,
    // 规格
    spec: `<p>机身颜色：iPhone8 银色4.7英寸</p>
                <p>版本类型：中国大陆</p>
                <p>套餐类型：官方标配</p>
                <p>存储容量：256GB</p>`,
    marketPrice: 2000,
    // 单价
    price: 1199.00,
    // 购买的数量
    count: 3,
    // 金额
    amount: 2398.00
  }
  ]
},
{
  // 购物车编号
  cartId: 2,
  // 店铺编号 
  shopId: 2002,
  // 店铺名称
  shopName: "罗蒙派大星专卖店",
  isChecked: false,
  products: [{
    // 商品编号
    productId: 1003,
    // 商品名称
    productName: "罗蒙夏季休闲裤男薄款大码长裤宽松直筒男裤冰丝超薄西裤男士裤子",
    // 顶层图片
    topImg: "img/6.jpg",
    // 商品图片
    imgs: [
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg",
      "img/4.jpg",
    ],
    // 是否参加电竞节
    isActivity: false,
    // 是否支持信用卡
    isCard: true,
    // 是否支持七天退货
    isSeven: true,
    // 是否如实描述
    isRealDesc: true,
    // 是否选择
    isChecked: false,
    // 规格
    spec: "<p>颜色：宝蓝色【5023款】+宝蓝色【5023】</p><p>尺码：28[腰围2尺10]</p>",
    marketPrice: 200,
    // 单价
    price: 168.00,
    // 购买的数量
    count: 2,
    // 金额
    amount: 336.00
  }]
},
{
  // 购物车编号
  cartId: 3,
  // 店铺编号 
  shopId: 2003,
  // 店铺名称
  shopName: "雅鹿提趣专卖店",
  isChecked: true,
  products: [{
    // 商品编号
    productId: 1004,
    // 商品名称
    productName: "雅鹿天丝休闲裤男士夏季薄款商务修身长裤子直筒西裤夏天冰丝男裤",
    // 顶层图片
    topImg: "img/7.jpg",
    // 商品图片
    imgs: [
      "img/1.jpg",
      "img/2.jpg",
      "img/3.jpg",
      "img/4.jpg",
    ],
    // 是否参加电竞节
    isActivity: false,
    // 是否支持信用卡
    isCard: true,
    // 是否支持七天退货
    isSeven: true,
    // 是否如实描述
    isRealDesc: true,
    // 是否选择
    isChecked: true,
    // 规格
    spec: "<p>颜色：660卡其(单件)</p><p>尺码：29</p>",
    marketPrice: 200,
    // 单价
    price: 118.00,
    // 购买的数量
    count: 1,
    // 金额
    amount: 118.00
  }]
}
]
Vue.createApp({
  data() {
    return {
      shopcarts,
      selectall: false,
      // deleteall: false
      tops: [
        {
          id: 1,
          topname: "全部商品",
          count: 3
        },
        {
          id: 2,
          topname: "降价商品",
          count: 0
        },
        {
          id: 3,
          topname: "库存紧张",
          count: 0
        }
      ],
      num: 0,
      offsetWidth: 0,
      // 判断样式是否选中
      yallChecked: false
    }
  },
  computed: {
    // 购物车总价
    totalPrice() {
      let price = 0
      this.shopcarts.forEach((item) => {
        item.products.forEach((uitem) => {
          if (uitem.isChecked) {
            price += (uitem.price * uitem.count)
          }
        })
      })
      // console.log(price);
      return price
    },
    // 购物车数量
    totalCount() {
      let count = 0
      this.shopcarts.forEach((item) => {
        item.products.forEach((uitem) => {
          if (uitem.isChecked) {
            count += uitem.count
          }
        })
      })
      return count
    }
  },
  methods: {
    // 全选按钮
    // selectAll() {
    //   if (!this.selectall) {
    //     this.shopcarts.forEach((item) => {
    //       item.isChecked = true;
    //       item.products.forEach((uitem) => {
    //         uitem.isChecked = true;
    //       })
    //     })
    //   } else {
    //     this.shopcarts.forEach((item) => {
    //       item.isChecked = false;
    //       item.products.forEach((uitem) => {
    //         uitem.isChecked = false;
    //       })
    //     })
    //   }
    // },
    // // 商铺选择
    // shopselect(shop) {
    //   if (!shop.isChecked) {
    //     shop.products.forEach((uitem) => {
    //       uitem.isChecked = true
    //     })
    //   } else {
    //     [
    //       shop.products.forEach((uitem) => {
    //         uitem.isChecked = false
    //       })
    //     ]
    //   }
    //   // console.log(shop.products.length);
    // },

    // 添加商品
    add(uitem) {
      uitem.count++
    },
    sub(uitem) {
      if (uitem.count <= 1) {
        alert("你真的不买吗？")
      } else {
        uitem.count--
      }
    },

    // 删除商品
    removegood(item, uitem) {
      item.products.splice(uitem, 1)
      if (item.products.length == 0) {
        this.shopcarts.splice(item, 1)
        console.log(item);
      }

      // this.shopcarts.splice(item,1)
    },

    // 实现头部动画
    changesty(index) {
      this.num = index
      this.offsetWidth = (index * 123) + 'px'
    },


    // 样式实现全选
    allCheckeds() {
      this.yallChecked = !this.yallChecked
      // console.log(this.allChecked);
      this.shopcarts.forEach((shop) => {
        shop.isChecked = this.yallChecked
        shop.products.forEach((good) => {
          good.isChecked = this.yallChecked
        })
      })
    },
    // 样式判断店铺
    shopSelect(shop) {
      shop.isChecked = !shop.isChecked
      shop.products.forEach((good) => {
        good.isChecked = shop.isChecked
      })
      // 记录选中商店的个数
      let num = 0
      this.shopcarts.forEach((shop) => {
        // console.log(shop);
        if (shop.isChecked) {
          num++
        }
        if (num === this.shopcarts.length) {
          this.yallChecked = true
        } else {
          this.yallChecked = false
        }
      })
    },
    // 商品
    goodSelect(shop, good) {
      good.isChecked = !good.isChecked
      // 记录选中的商品个数
      let gnum = 0
      // 记录选中的店铺个数
      let snum = 0
      // console.log(shop,good);
      shop.products.forEach((good) => {
        if (good.isChecked) {
          gnum++
        }
        if (gnum === shop.products.length) {
          shop.isChecked = true
        } else {
          shop.isChecked = false
        }
      })
      this.shopcarts.forEach((shop) => {
        if (shop.isChecked) {
          snum++
        }
        if (snum === this.shopcarts.length) {
          this.yallChecked = true
        } else {
          this.yallChecked = false
        }
      })
    }
  },
}).mount("#shopcart")
